<template>
    <rx-dialog @ok="handleSubmit" @cancel="cancel">
        <rx-layout>
            <template #middle>
                <div style=" height: 100%; padding: 20px;">
                    <a-form style="height:100%;">
                        <a-row>
                            <a-col :span="12">
                                <a-form-item  :label="filterI18n('title','标题')">
                                    <a-input v-model:value="title" ></a-input>
                                </a-form-item>
                            </a-col>
                        </a-row>
                        <a-row>
                            <a-col :span="12">
                                <a-form-item  :label="filterI18n('options','多选')">
                                    <a-switch size="small" v-model:checked="settings.multiSelect"/>
                                </a-form-item>
                            </a-col>
                        </a-row>
                        <a-row>
                            <a-col :span="12">
                                <a-form-item  :label="filterI18n('dialog','对话框')">
                                    <rx-input-button ref="dialog" @btnClick="selectDialog" v-model="dialog" :singleValue="false" />
                                </a-form-item>
                            </a-col>
                        </a-row>
                        <a-row>
                            <a-col :span="12">
                                <a-form-item  :label="filterI18n('label','文本')">
                                    <a-select :options="sqlFields" v-model:value="textField" :getPopupContainer="(p)=>p.parentNode"/>
                                </a-form-item>
                            </a-col>
                            <a-col :span="12">
                                <a-form-item  :label="filterI18n('value','值')">
                                    <a-select :options="sqlFields" v-model:value="valueField" :getPopupContainer="(p)=>p.parentNode"/>
                                </a-form-item>
                            </a-col>
                        </a-row>
                    </a-form>
                </div>
            </template>
        </rx-layout>
    </rx-dialog>
</template>

<script>
import filter from "./filter";
import {RxInputButton} from "@lowcode/jpaas-base-lib";
import {ShareDialog} from "@lowcode/jpaas-share-component"
import ScreenApi from "@/api/screen-api";

export default {
    name: "dialog-filter",
    mixins:[filter],
    data() {
        return {
            dialog:"",
            textField:"",
            valueField:"",
            sqlFields:[]
        }
    },
    components:{
        RxInputButton
    },
    methods: {
		filterI18n(name,text,key){
			return this.$ti18(name,text,"filterControllerLang",key);
		},
        //初始化配置
        initSetting() {
            if(this.row.settings){
                this.settings =this.row.settings;
                if(this.settings.dialog) {
                    this.dialog=this.settings.dialog;
                    this.textField=this.settings.textField;
                    this.valueField=this.settings.valueField;
                    this.loadFields(JSON.parse(this.settings.dialog).value);
                }
            }else {
                this.settings = {
                    dialog:"",
                    valueField:"",
                    textField:"",
                    multiSelect:false
                }
            }
        },
        //获取配置
        getSetting(){
            this.settings.dialog=this.dialog;
            this.settings.textField=this.textField;
            this.settings.valueField=this.valueField;
            return this.settings;
        },
        selectDialog(vm){
            let self = this;
            ShareDialog.openFormBoListSelectDialog({
                curVm: this, widthHeight: ['800px', '600px'],data:{isDialog:'YES'}
            }, function (data) {
                self.loadFields(data.key);
                self.dialog=JSON.stringify({label: data.name, value: data.key})
            })
        },
        loadFields(key){
            ScreenApi.getListByKey(key).then(res=>{
                let data=res.data;
                let fieldsStr=data.fieldsJson;
                if(!fieldsStr) return;
                let fileds=JSON.parse(fieldsStr);
                let ary=[];
                fileds.map(function(item){
                    if(item.isReturn) {
                        ary.push({
                            value: item.field,
                            label: item.header
                        })
                    }
                })
                this.sqlFields=ary;
            })
        },
    },
    watch: {
    }
}
</script>

<style scoped>
</style>
